<html>
    <head>
        <title>多个组件的过渡</title>
    </head>
    <body>
        <script>
            // 多个组件的过渡
                    /*
                        多个组件的过渡要简单很多， 我们不需要使用 key 标签属性。
                        相反，我们只需要使用"动态组件"
            
                        例如：
                            <transition name="component-fade">
                                <component v-bind:is="view"></component>
                            </transition>
                    */
                            new Vue({
                                el:'#transition-components-demo',
                                data:{
                                    view:'v-a'
                                },
                                components:{
                                    'v-a':{
                                        template:'<div>Component A</div>'
                                    },
                                    'v-b':{
                                        template:'<div>Component B</div>'
                                    }
                                }
                            })
                          
                        /*
                            .component-fade-enter-active, .component-fade-leave-active {
                                transition: opacity .3s ease;
                            }
                            .component-fade-enter, .component-fade-leave-to {
                                opacity: 0;
                            }
                        */
                    
        </script>
    </body>
</html>